<template>
	<div class="position">
		<span class="iconfont position_icon">&#xe8ae;</span>
		广东工贸职业技术学院（天河校区）
		<span class="iconfont position_notice">&#xe631;</span>
	</div>
	<div class="search">
		<span class="iconfont">&#xe602;</span>
		山姆会员商店优惠商品
	</div>
	<div class="banner">
		<img class="banner_img" src="../../assets/banner.jpg">
	</div>
	<div class="icons">
		<div class="icons_item" v-for="item in iconsList" :key="item.title">
			<img class="icons_item_img" :src="item.imgName">
			<p class="icons_item_desc">{{ item.title }}</p>
		</div>
	</div>
	<div class="gap"></div>
</template>

<script>
	export default{
		data(){
			// 存放数据
			const iconsList = [
				{imgName:require('../../assets/超市.png'),title:'超市便利'},
				{imgName:require('../../assets/菜市场.png'),title:'菜市场'},
				{imgName:require('../../assets/水果店.png'),title:'水果店'},
				{imgName:require('../../assets/鲜花.png'),title:'鲜花绿植'},
				{imgName:require('../../assets/医药健康.png'),title:'医药健康'},
				{imgName:require('../../assets/家居.png'),title:'家居时尚'},
				{imgName:require('../../assets/签到.png'),title:'签到'},
				{imgName:require('../../assets/蛋糕.png'),title:'烘培蛋糕'},
				{imgName:require('../../assets/大牌免运.png'),title:'大牌免运'},
				{imgName:require('../../assets/红包.png'),title:'红包套餐'}
			]
			return { iconsList }
		}
	}
</script>

<style lang="scss" scoped>
	.position {
		overflow: hidden;
		position: relative;
		padding: .16rem .24rem .16rem 0;
		line-height: .22rem;
		font-size: .16rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	
		.position_icon {
			position: relative;
			top: .01rem;
			font-size: .2rem;
		}
	
		.position_notice {
			position: absolute;
			right: 0;
			top: .17rem;
			font-size: .2rem;
		}
	}
	
	.search {
		margin-bottom: .12rem;
		line-height: .32rem;
		background: #F5F5F5;
		color: #B7B7B7;
		border-radius: .16rem;
		font-size: .14rem;
	
		.iconfont {
			display: inline-block;
			padding: 0 .08rem 0 .16rem;
			font-size: .2rem;
		}
	
		&_text {
			display: inline-block;
			font-size: .14rem;
		}
	}
	
	.banner {
		height: 0;
		overflow: hidden;
		padding-bottom: 25.4%;
	
		&_img {
			width: 100%;
		}
	}
	
	.icons {
		display: flex;
		flex-wrap: wrap;
		margin-top: .16rem;
	
		&_item {
			width: 20%;
	
			&_img {
				display: block;
				width: .4rem;
				height: .4rem;
				margin: 0 auto;
			}
	
			&_desc {
				margin: .06rem 0 .16rem 0;
				text-align: center;
			}
		}
	}
	
	.gap {
		margin: 0 -.18rem;
		height: .1rem;
		background: #F1F1F1;
	}
</style>
